<template>
  <div
      class="member-cell"
      :class="[
      align ? 'member-cell--align-' + align : ''
    ]"
  >
    <svg-icon icon-class="user" :type="online === 1 ? 'primary' : 'info'"></svg-icon>
    <el-button type="link" size="small"
               @click="openMemberTable"
    >
      <span v-if="searchKey != undefined" v-html="formarUsername"></span>
      <span v-else>{{username}}</span>
    </el-button>
  </div>
</template>

<script>

  export default {
    name: "member-cell",

    props: {
      online: Number,
      username: String,
      align: {
        default: 'left'
      },
      type: String,
      data: Object,
      searchKey: String,//会员支持模糊搜索用
    },

    computed:{
      formarUsername(){
        if(this.searchKey != undefined){
          const reg = new RegExp(`(${this.searchKey})`,'i');
          return this.username.replace(reg,`<span class="text-danger">$1</span>`);
        }else{
          return this.username;
        }
      }
    },

    methods: {
      openMemberTable() {
        if (this.type == 'detail') {
          this.$memberDetail({
            info: {
              username: this.data.userName,
              id: this.data.uid,
              timestamp: this.data.timestamp,
              filters: this.filters,
            },
            callback: action => {
              if (action === 'success') {
                this.doGet({action: 'getGrid'});
              }
            }
          });
        } else {
          this.$router.push({name: 'lower-level-center', params: {username: this.username}});
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  @include b(member-cell) {
    display: flex;
    flex-flow: nowrap;
    align-items: center;
    .svg-icon {
      margin-right: 2px;
    }
    .el-button {
      padding: 0;
    }

    @include m(align-center) {
      justify-content: center;
    }
  }
</style>
